<template>
  <div class="centers diolog_adapt">
    <el-form :model="addForm" ref="ruleForm" :rules="rules">
      <el-form-item label="型号选择:" label-width="140px" prop="thereId">
        <el-select v-model="addForm.thereId" placeholder="没有选中任何项" class="add_select" @change="thereIdChange">
          <el-option v-for="item in lotoptions" :key="item.id" :label="`${item.name_code} : ${item.name}`" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="需求类型:" label-width="140px" prop="demand_type">
        <el-select v-model="addForm.demand_type" placeholder="没有选中任何项" class="add_select">
          <el-option v-for="item in condition" :key="item.id" :label="item.name" :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="期望完成日期:" label-width="140px" prop="expect_time">
        <el-date-picker v-model="addForm.expect_time" type="date" placeholder="选择日期" :picker-options="pickerOptions0" format="yyyy 年 MM 月 dd 日" value-format="timestamp">
        </el-date-picker>
      </el-form-item>
      <div class="flex flex_bet felx_align hardwareDate" v-if="hardwareShow">
        <el-form-item label="型号" label-width="140px" class="boxitem">
          <el-input v-model="hardwareDate.name" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="CPU" label-width="140px" class="boxitem">
          <el-input v-model="hardwareDate.cpu" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="运存RAM" label-width="140px" class="boxitem">
          <el-input v-model="hardwareDate.start_ram" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="存储ROM" label-width="140px" class="boxitem">
          <el-input v-model="hardwareDate.storage_rom" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="显示屏" label-width="140px" class="boxitem">
          <el-input v-model="hardwareDate.display" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="触摸屏" label-width="140px" class="boxitem">
          <el-input v-model="hardwareDate.touch_screen" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="前摄像头" label-width="140px" class="boxitem">
          <el-input v-model="hardwareDate.prefix_camera" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="后摄像头" label-width="140px" class="boxitem">
          <el-input v-model="hardwareDate.suffix_camera" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="电池" label-width="140px" class="boxitem">
          <el-input v-model="hardwareDate.battery" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="其他特殊说明" label-width="140px" class="boxitem">
          <el-input v-model="hardwareDate.other" autocomplete="off" disabled></el-input>
        </el-form-item>
      </div>
      <el-form-item label="开机LOGO" label-width="140px" >
        <div class="addPut">
          <el-input v-model="addForm.start_logo" autocomplete="off" placeholder="默认为COLORFLY/教管壹，否则请上传开机LOGO图" disabled></el-input>
          <el-upload :action="`${uploadLink}api/custom/uploadCustom`" class="upload-demo uploadBtn show-pwd" :data="pdfData" :show-file-list="false" :on-success="uploadSelect">
            <el-button size="mini">上传</el-button>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="开机动画" label-width="140px" >
        <div class="addPut">
          <el-input v-model="addForm.start_animation" autocomplete="off" placeholder="默认为COLORFLY/教管壹，否则请上传开机动画图" disabled></el-input>
          <el-upload :action="`${uploadLink}api/custom/uploadCustom`" class="upload-demo uploadBtn show-pwd" :data="pdfData" :show-file-list="false" :on-success="uploadingAnimation">
            <el-button size="mini">上传</el-button>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="开机铃声" label-width="140px">
        <el-input v-model="addForm.start_ring" autocomplete="off" placeholder="默认为COLORFLY/教管壹，否则请上传开机铃声" class="add_select"></el-input>
      </el-form-item>
      <el-form-item label="默认壁纸" label-width="140px" >
        <div class="addPut">
          <el-input v-model="addForm.wallpaper" autocomplete="off" placeholder="默认为COLORFLY/教管壹，否则请上传壁纸" class="add_select" disabled></el-input>
          <el-upload :action="`${uploadLink}api/custom/uploadCustom`" class="upload-demo uploadBtn show-pwd" :data="pdfData" :show-file-list="false" :on-success="uploadWallpaper">
            <el-button size="mini">上传</el-button>
          </el-upload>
        </div>
      </el-form-item>
      <el-form-item label="应用内置需求" label-width="140px" >
        <el-input v-model="addForm.app_demand" autocomplete="off" placeholder="默认为无内置应用需求，否则请输入应用内置需求" class="add_select"></el-input>
      </el-form-item>
      <el-form-item label="Launcher桌面需求" label-width="140px" >
        <el-input v-model="addForm.launcher_desktop" autocomplete="off" placeholder="请输入Launcher桌面需求" class="add_select"></el-input>
      </el-form-item>
      <el-form-item label="系统语言需求" label-width="140px" >
        <el-input v-model="addForm.language" autocomplete="off" placeholder="请输入系统语言需求" class="add_select"></el-input>
      </el-form-item>
      <el-form-item label="系统输入法需求" label-width="140px">
        <el-input v-model="addForm.type_writing" autocomplete="off" placeholder="请输入系统输入法需求" class="add_select"></el-input>
      </el-form-item>
      <el-form-item label="OTA升级需求" label-width="140px" >
        <el-input v-model="addForm.ota_demand" autocomplete="off" placeholder="请输入OTA升级需求" class="add_select"></el-input>
      </el-form-item>
      <el-form-item label="其他需求补充" label-width="140px" >
        <div class="addPut">
          <el-input v-model="addForm.other_demand" autocomplete="off" placeholder="其他需求补充或直接导入xlsx表格" style="flex:1"></el-input>
          <el-upload class="upload-demo uploadBtn show-pwd" accept=".xlsx,.xls" :action="`${uploadLink}api/custom/uploadCustom`" :show-file-list="false" :data="pdfData" :on-success="unloadXlsx">
            <el-button size="mini">上传</el-button>
          </el-upload>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getCreateDigits, digitsThereGetFirmware } from "@/api/snControl.js";
import { addFirmwareCustom, queryUserIdFirmwareCustom } from "@/api/firmware.js";
import UploadExcelComponent from "@/components/UploadExcelSn/index.vue";
export default {
  components: { UploadExcelComponent },
  data() {
    return {
      //型号选择：第3/4位选择框
      lotoptions: [],
      //需求选择框
      condition: [{ id: 1, name: '新创需求' }, { id: 2, name: '补充需求' }, { id: 3, name: '解BUG' }],
      //限制日期选择框范围
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      //硬件数据
      hardwareDate: {},
      //硬件视图
      hardwareShow: false,
      pdfData: { userId: localStorage.getItem("ID"), last_ip: sessionStorage.getItem("Ip") },
      addForm: {
        thereId: '', demand_type: '', expect_time: '', start_logo: '', start_animation: '', start_ring: '',
        wallpaper: '', app_demand: '', launcher_desktop: '原生桌面', language: '中文', type_writing: '谷歌输入法', ota_demand: '', other_demand: ''
      },
      rules: {
        thereId: [{ required: true, message: "请选择型号", trigger: "blur" }],
        demand_type: [{ required: true, message: "请输入需求类型", trigger: "blur" }],
        expect_time: [{ required: true, message: "请选择期望完成时间", trigger: "blur" }],
        start_logo: [{ required: true, message: "请上传开机logo图", trigger: "blur" }],
        start_animation: [{ required: true, message: "请上传开机动画", trigger: "blur" }],
        start_ring: [{ required: true, message: "请输入开机铃声格式", trigger: "blur" }],
        wallpaper: [{ required: true, message: "请上传默认壁纸", trigger: "blur" }],
        app_demand: [{ required: true, message: "请输入应用内置需求", trigger: "blur" }],
        launcher_desktop: [{ required: true, message: "请输入Launcher桌面需求", trigger: "blur" }],
        language: [{ required: true, message: "请输入系统语言需求", trigger: "blur" }],
        type_writing: [{ required: true, message: "请输入输入法", trigger: "blur" }],
        ota_demand: [{ required: true, message: "请输入OTA升级需求", trigger: "blur" }]
      },
      uploadLink: process.env.VUE_APP_BASE_API
    }
  },
  created() {
    this.getCreateDigitss(3)
    this.getqueryUserIdFirmwareCustom(localStorage.getItem("ID"))
  },
  methods: {
    closeDialog() {
      this.$emit('closeAdd')
    },
    //获取最近定制固件信息
    getqueryUserIdFirmwareCustom(id) {
      queryUserIdFirmwareCustom({userId: id}).then(res => {
        Object.keys(this.addForm).forEach(key => this.addForm[key] = res.data[key])
        this.addForm.thereId = res.data.dId
        this.addForm.expect_time = res.data.expect_time * 1000
        console.log('------------',res.data)
      }).catch(err => { })
    },
    //增加定制需求
    getaddFirmwareCustom() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          let addForm = JSON.parse(JSON.stringify(this.addForm))
          addForm.expect_time = addForm.expect_time / 1000
          addForm.userId = localStorage.getItem("ID")
          addForm.last_ip = sessionStorage.getItem("Ip")
          console.log('增加定制需求', addForm)
          addFirmwareCustom(addForm).then(res => {
            this.$message.success(res.msg)
            this.$emit('getqueryFirmwareCustom')
            this.$emit('closeAdd')
          }).catch(err => {
            console.log('表格导入失败', err)
            this.$emit('closeAdd')
          })
        } else {
          return false
        }
      })
    },
    //需求导入表格
    unloadXlsx(res) {
      if (res.code == 200) {
        console.log('表格导入', res.data)
        this.addForm.other_demand = res.data.filePath
      } else {
        this.$message.error(res.msg)
      }
    },
    //上传开机动画,
    uploadingAnimation(res) {
      if (res.code == 200) {
        this.addForm.start_animation = res.data.filePath
      } else {
        this.$message.error(res.msg)
      }
    },
    //上传开机LOGO图
    uploadSelect(res) {
      if (res.code == 200) {
        this.addForm.start_logo = res.data.filePath
      } else {
        this.$message.error(res.msg)
      }
    },
    //上传壁纸
    uploadWallpaper(res) {
      if (res.code == 200) {
        this.addForm.wallpaper = res.data.filePath
      } else {
        this.$message.error(res.msg)
      }
    },
    //型号选择change事件
    thereIdChange(val) {
      this.getdigitsThereGetFirmware(val)
    },
    //第三位数编号获取固件信息
    getdigitsThereGetFirmware(id) {
      digitsThereGetFirmware({ thereId: id }).then(res => {
        this.hardwareDate = res.data
        this.hardwareShow = true
        console.log('型号选择change事件', res.data)
      }).catch(err => {
        this.hardwareShow = false
        this.hardwareDate = []
      })
    },
    //表单关闭事件
    addFormclose() {
      this.$nextTick(() => {
        this.hardwareShow = false
      })
    },
    //获取1、2、3位数信息
    getCreateDigitss(type) {
      getCreateDigits({ type: type }).then(res => {
        this.lotoptions = res.data
        console.log('获取1、2、3位数信息',res.data)
      }).catch(err => {
        this.lotoptions = false
      })
    },
  }
}
</script>

<style scoped lang="scss">
.hardwareDate {
  width: 91%;
  display: flex;
  flex-wrap: wrap;
  .boxitem {
    width: 49%;
  }
}
.uploadBtn{
  position: absolute;
  top: 0;
  right: 10px;
}
</style>
